import React from 'react'
import { BaseListPage, columnRenders, UdModal, http } from '@/lib'
import { agentTypeEnum, agentTypeOptions } from '../../common'
import { Button, Select, message } from 'antd'
import udMainStore from '@/store/UdMain'
import UpdateModalContent from './component/UpdateModalContent'

const { Option } = Select

export const adjustmentTypeEnum = {
  UP: '调增',
  DOWN: '调减',
}
const statusEnum = {
  0: '草稿',
  1: '审批中',
  2: '审批通过',
  3: '审批驳回',
}
const quarterEnum = {
  0: 'Q1',
  1: 'Q2',
  2: 'Q3',
  3: 'Q4',
}

const statusOptions = Object.keys(statusEnum).map(key => ({ value: key, title: statusEnum[key] }))
const quarterOptions = Object.keys(quarterEnum).map(key => ({ value: key, title: quarterEnum[key] }))
export const adjustmentTypeOptions = Object.keys(adjustmentTypeEnum).map(key => ({ value: key, title: adjustmentTypeEnum[key] }))

class List extends BaseListPage {
  private brandList = udMainStore.brandList
  constructor(props) {
    super(props)
    this.state = {
      title: '积分调整',
      queryApi: '',
      rowKey: '',
      conditions: [
        { label: '客户名称', id: 'name' },
        { label: '客户类型', id: 'agentType', render: () => {
          return (
            <Select>
              {agentTypeOptions.map(({value, title}) => <Option key={value} value={value}>{title}</Option>)}
            </Select>
          )
        } },
        { label: '品牌公司', id: 'brandCode', render: () => {
          return (
            <Select>
              {this.brandList.map(({value, title}) => <Option key={value} value={value}>{title}</Option>)}
            </Select>
          )
        } },
        { label: '季度', id: 'quarter', render: () => {
          return (
            <Select>
              {quarterOptions.map(({value, title}) => <Option key={value} value={value}>{title}</Option>)}
            </Select>
          )
        } },
        { label: '调整类型', id: 'adjustmentType', render: () => {
          return (
            <Select>
              {adjustmentTypeOptions.map(({value, title}) => <Option key={value} value={value}>{title}</Option>)}
            </Select>
          )
        } },
        { label: '调整项', id: 'modifyItem' },
      ],
      columns: [
        { title: '编号', dataIndex: 'id', render: (text, record, index) => index + 1 },
        { title: '客户名称', dataIndex: 'name' },
        { title: '客户类型', dataIndex: 'agentType', render: columnRenders.enum(agentTypeEnum) },
        { title: '品牌公司', dataIndex: 'company' },
        { title: '片区', dataIndex: 'area' },
        { title: '年度', dataIndex: 'year' },
        { title: '季度', dataIndex: 'quarter' },
        { title: '调整类型', dataIndex: 'adjustmentType', render: columnRenders.enum(adjustmentTypeEnum) },
        { title: '调整项', dataIndex: 'modifyItem' },
        { title: '调整积分', dataIndex: 'modifyNum' },
        { title: '状态', dataIndex: 'status', render: columnRenders.enum(statusEnum) },
        { title: '创建人', dataIndex: 'createUser' },
        { title: '创建时间', dataIndex: 'createTime' },
        {
          title: '操作', dataIndex: 'operate', render: columnRenders.operate([
            { title: '编辑', action: (text, record) => this.openModal(record) },
            { title: '删除', action: (text, record) => this.deleteHandle(record) },
            { title: '提交审批', action: (text, record) => this.submitApprove(record) },
            { title: '查看', action: (text, record) => this.viewDetail(record) },
          ])
        },
      ],
      leftBtns: [
        <Button type='primary' onClick={() => this.openModal()}>新增</Button>,
        <Button>导出</Button>
      ]
    }
  }

  public openModal = (row?) => {
    let title = row ? '编辑' : '新增'
    UdModal.open({
      width: '70%',
      title: title + '积分调整',
      content: <UpdateModalContent />,
      onOk: (values) => {
        return http.post('').then(res => {
          message.success(title + '成功')
          this.query()
        })
      }
    })
  }

  public deleteHandle = (row) => {

  }

  public submitApprove = (row) => {

  }

  public viewDetail = (row) => {

  }

}

export default List
